<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            border: 2px solid;
            background: lightblue;
            width: 500px;
            height: 500px;
            padding: 50px;
            margin: 0 auto;
        }

        p{
            border: 2px solid;
            background: rgb(252, 81, 81);
            width: 100px;
            height: 100px;
            padding: 50px;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <header>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe quam maxime laudantium, eveniet vitae dignissimos magnam dolore, eligendi adipisci voluptate corrupti! Fuga iste eum id? Neque, explicabo repellendus harum vero, ipsa maxime earum nemo, fugit quisquam quas fuga tempore? Autem, a dolor quidem cumque delectus ducimus molestiae aspernatur doloribus omnis, labore, ab accusamus. Ipsa ipsum commodi assumenda consectetur animi quae qui atque ex nobis vero ratione hic, perspiciatis dolore incidunt possimus. Amet adipisci quae nisi quasi fuga ullam, modi magnam ab labore aliquam deserunt laboriosam delectus autem, magni impedit eum aspernatur cumque. Quae totam eveniet magnam labore error rem numquam provident autem culpa aperiam rerum cupiditate consectetur dolorum beatae iure blanditiis, obcaecati illum aliquam vel earum. Soluta quis, exercitationem, minima dicta harum asperiores et officia repellendus ducimus sit, molestias ratione error possimus quibusdam ut? Perferendis reiciendis exercitationem, quibusdam atque non eaque eum odio, rem placeat mollitia provident cumque dignissimos nihil commodi expedita incidunt, amet autem nesciunt labore ut ad delectus dolorem quas? Laboriosam, magni nostrum? Asperiores, provident ea repellat at fugit dolor quibusdam, nisi sint facilis modi maxime accusamus dolore assumenda atque! Veniam, similique nulla doloremque pariatur incidunt debitis nobis minima, suscipit officiis praesentium dolores, itaque quod libero? Ab dolore officiis quae voluptatum quod, fugiat cupiditate, eos quis fugit, magnam vel hic labore. In sequi laboriosam quo, quas natus tempore blanditiis error magnam cupiditate labore corrupti deleniti hic molestiae similique, sint cumque vero. Quod quas accusamus quos eius dolorem atque iure ad unde accusantium? Officiis placeat numquam dicta quia fugit vero voluptatum hic iure cumque dolores dolorem iste, nobis suscipit? Cumque rem fugit a rerum eius, asperiores adipisci laborum nostrum sed architecto ea placeat omnis dolores eum accusamus corrupti nam vero amet dolor non deserunt molestias? Autem eum voluptate, facilis aspernatur repellendus numquam modi tenetur sed accusantium totam quod et corporis corrupti ullam nemo error architecto in laudantium veritatis maiores cum non vero voluptatibus. Porro placeat distinctio ipsa? Reiciendis commodi consequuntur reprehenderit architecto beatae debitis ut laudantium molestias quidem dignissimos, qui aspernatur ab accusamus ipsum earum et, officia cum in incidunt aut quaerat tempora, mollitia eveniet. Nostrum recusandae asperiores totam enim animi. Tempore libero impedit dicta vitae, quod nostrum recusandae nihil autem odit rerum, animi repellendus quis nulla maiores ex. Ipsa quasi aut quidem non, dolorum vel assumenda obcaecati enim veniam voluptates nesciunt esse sint velit suscipit deserunt eaque repellendus quod accusantium ea iste! Tempore at sint adipisci voluptate sequi. Aperiam deserunt earum similique reprehenderit corporis sunt odit quaerat doloremque vero tenetur facilis impedit, enim voluptatem. Sed, dolorem ipsam iure quos in quas? Expedita sapiente soluta eaque rerum. Quis minus cum officia rem, facilis quibusdam? Reiciendis quia odit nesciunt aperiam quo ullam, id eveniet nam? Non corrupti assumenda labore aspernatur ipsum soluta, facere adipisci cupiditate ipsam fugiat magni ratione sed, inventore quisquam dolore ipsa nihil commodi odit quod eos est iste cum incidunt! Dolorum sed quisquam doloremque nulla, iusto, eius id consequatur rem explicabo obcaecati, velit iure vel pariatur nemo quaerat aperiam? Pariatur esse dicta aut sed ea iste quidem, vitae aperiam facere illo, officiis fugiat. Alias, vitae sint provident, suscipit corrupti eum dignissimos error dolorem quod nisi accusantium, numquam ratione tempore harum ut ullam facere pariatur a ipsa similique deserunt vero quasi! Non necessitatibus, molestiae quibusdam alias nobis dolorum neque molestias repudiandae et aut tempora, incidunt quasi inventore nemo, deserunt harum odit corrupti ipsum officia sapiente sint sunt eaque mollitia. Expedita neque cupiditate exercitationem. Facilis quaerat voluptatibus dolorum porro, ab accusamus nostrum similique optio necessitatibus odio praesentium itaque sapiente unde numquam nulla vero ad. Fugit ipsa debitis aperiam, at unde excepturi ipsam tenetur dolores qui ullam deserunt suscipit voluptate amet perferendis saepe hic corrupti vero velit odit blanditiis quia molestiae? Nisi perferendis vitae quaerat officia reiciendis optio, iste eos praesentium veniam maxime ipsam labore doloribus commodi corporis laudantium soluta. Voluptatem, quia soluta voluptate est consequuntur, veritatis ea nostrum incidunt unde, dolor molestias reiciendis perspiciatis earum voluptatibus a iusto accusamus consequatur id. In adipisci facilis, ad, totam illum reiciendis iste autem error ratione dolore nisi facere laudantium modi nulla voluptates sint nostrum? In architecto tempora et perferendis aperiam provident, fugit nisi expedita veniam consequuntur, minima, esse soluta explicabo eos atque adipisci! Rerum numquam quia iure non error, ratione placeat laudantium! Officia perferendis odio fugiat, laborum itaque porro illo nam voluptate reiciendis dolor tenetur sit animi, blanditiis ea saepe laudantium suscipit aliquam repellat modi minima! Perspiciatis eaque similique sequi dolorem officiis exercitationem velit dolor saepe corrupti commodi placeat aut tempore optio recusandae cupiditate pariatur, unde eos voluptates quibusdam alias sunt? Similique ipsa deleniti dicta enim asperiores suscipit reprehenderit inventore ipsam sapiente rerum numquam, velit aliquid iste quasi facilis ab debitis alias sint odio vero! Sequi explicabo corporis voluptate ipsa sapiente omnis sunt architecto, voluptatum atque deleniti laboriosam labore dignissimos voluptas exercitationem beatae facilis quas earum nisi nihil eligendi officia totam qui. Maxime ut dolore debitis vel atque expedita repellat, fuga mollitia? Vitae culpa nihil sunt tempora ipsa deleniti. Quisquam consequuntur deserunt aliquam laudantium itaque iure tenetur incidunt adipisci rem, natus qui eaque laboriosam necessitatibus optio fugiat nobis. Veniam, itaque earum! Delectus vel fugiat ducimus aliquid. Id, hic eaque? Consectetur asperiores necessitatibus a laborum nemo. Cupiditate dolorum in, quis vero reprehenderit sed, quidem totam non, inventore at aperiam eveniet ex eius vel distinctio soluta consequuntur saepe minus enim molestiae odio? Eveniet quas non modi tenetur maiores omnis! Necessitatibus odit suscipit recusandae esse ut, distinctio architecto. Assumenda quibusdam necessitatibus distinctio illo aperiam temporibus, cumque, perferendis, quae nemo sint ratione quaerat minima? Cum est ab molestiae, eum nemo repellendus ipsam voluptas delectus non voluptatem voluptatum. Itaque fuga ad repellendus. Eum blanditiis numquam ad expedita voluptatibus dolor minus harum placeat illo possimus enim nam fugiat nostrum magni, fugit cumque modi? Harum animi corporis provident porro, necessitatibus quis dolorem voluptatibus assumenda deleniti atque architecto dolore. Optio sint facilis sapiente natus qui repellat! Magni perferendis hic, maiores commodi odio vero nam et esse tenetur adipisci pariatur laboriosam optio amet autem, saepe eveniet deserunt quia labore iste sed animi alias voluptatibus! Nihil nemo ex architecto asperiores tenetur? Alias aut, cumque, consectetur eius expedita animi sed eaque ipsum mollitia harum voluptatibus non, perspiciatis provident voluptate sit ratione architecto accusamus! Aliquid veritatis recusandae distinctio modi eaque repellat ea corporis, alias, consequuntur dolor animi iste quasi iure culpa sed! Voluptatibus aspernatur velit accusantium vel nemo illo consequuntur fuga, exercitationem reiciendis magni temporibus assumenda eum quae repudiandae sint provident quis, cum deleniti ab. Temporibus ipsam cupiditate tenetur mollitia aliquam tempora totam saepe. Quo repellat architecto iste, ratione, enim at tempore mollitia eos molestias laudantium officiis commodi alias. Corporis itaque illo dicta eaque, harum, ipsa fugit possimus impedit laudantium voluptatum, tempore incidunt rem reiciendis qui commodi illum aut eius a? Obcaecati doloremque beatae ratione culpa quasi molestias quibusdam perferendis, nemo accusantium aliquid temporibus modi ipsam doloribus voluptatem, perspiciatis in, eius delectus? Quidem vero nisi ab incidunt modi, explicabo magnam eum ratione laudantium qui quibusdam autem, reprehenderit consequuntur non quae recusandae aliquid. Numquam, doloremque in. Delectus facilis doloribus nam, laborum quas maxime nihil id vero sint, molestias mollitia culpa distinctio a dolores dicta soluta excepturi reiciendis! Quaerat eveniet exercitationem accusantium dicta magni dolore harum inventore at, optio vitae nam minima odio magnam aperiam et! Aut quo ut non quam vel totam voluptatem fugit impedit delectus dolore, provident reiciendis, ducimus enim, aspernatur molestias consequatur harum. Corrupti obcaecati molestias voluptas, iusto cumque quo, ratione mollitia ipsam sit nemo id eveniet voluptatum minima placeat quod consequuntur sed voluptatibus aliquam? Porro aliquam eos aut nostrum atque accusamus blanditiis aliquid deleniti animi non iure, dicta hic debitis fugit ipsum doloribus, eius rem quia harum. Quod dolor eius laboriosam? Dolorum dolor ad veritatis veniam totam voluptatum consequuntur vitae! Sunt commodi officia voluptatum sed eum officiis praesentium, consectetur deserunt hic vel minima eligendi, quam ipsum consequuntur obcaecati labore ratione ea! Earum placeat ratione in nobis hic molestias repellendus facere odio ad at ut, tenetur ullam, laboriosam unde minus fugiat voluptas! Adipisci dignissimos, esse totam iure vel fuga quos exercitationem veritatis numquam impedit maxime libero autem deleniti, quas atque sed commodi perspiciatis omnis quia consequatur expedita. Laboriosam est quidem neque explicabo illo eum velit perferendis, non provident ea animi dolore aut dolorem. Et, obcaecati placeat beatae id sint porro ex dolores aperiam quasi dolore odit molestiae ullam ducimus voluptatem reiciendis dolorum sunt cumque repudiandae rerum molestias unde hic quod alias? Tempora doloremque vitae quos eligendi voluptate quibusdam quia excepturi ab, nesciunt tenetur nemo temporibus odit eos esse vel nisi similique accusantium eum, eaque a. Totam, ratione maiores? Laudantium omnis doloribus in magni, sunt soluta quam voluptatibus. Sit possimus quam nisi perspiciatis quae amet! Quos autem voluptatem voluptate illum earum, quae laborum tempora molestias aut assumenda, enim ex. Magni vero accusamus molestiae dicta at repudiandae molestias ducimus cumque vitae tempora, neque, ut alias ipsum? Deserunt non voluptatem, sit at numquam nihil quisquam cupiditate perferendis iusto animi, officiis eius, architecto labore. A amet numquam aperiam commodi perspiciatis officiis aspernatur. Debitis cupiditate facere consectetur eum amet! Et, molestiae dicta aut placeat minus quia minima, est sint accusamus perspiciatis enim quo veritatis delectus! Autem, placeat. Nobis eius dolorum fuga saepe, earum obcaecati nostrum ut dolore exercitationem nesciunt possimus incidunt quasi illo, delectus, corporis non facilis neque accusantium! Modi nisi, eveniet suscipit amet nihil sequi voluptatem minus unde pariatur id. Culpa expedita, est cupiditate suscipit aliquid deserunt tempora iure nostrum, a laborum voluptatibus quisquam, vitae illo aperiam nesciunt explicabo quas doloribus! Consequuntur, laborum! Veritatis cupiditate itaque sequi blanditiis iusto aliquam nobis eum, eos exercitationem. Eligendi odio, ex laboriosam veritatis cumque reiciendis animi provident, recusandae corrupti libero cupiditate cum, ab voluptas et vero odit ea dicta. Consequuntur, dolorum. Vero, inventore! Ab ipsum ratione exercitationem nihil qui. Mollitia nisi cupiditate voluptates, cum natus esse pariatur, dolore sunt consectetur vero doloremque quo explicabo debitis aperiam illo minus reprehenderit quidem velit accusamus accusantium quasi. Laboriosam dolores aliquid et qui quod facere voluptatem, cupiditate aut omnis quisquam fugiat neque at ipsam aperiam numquam nisi ipsa voluptas soluta. Soluta architecto dicta quam excepturi dolorum fuga obcaecati deserunt, libero saepe neque tempore placeat dolores odio consequuntur voluptatum, numquam provident, nihil quos laborum nulla sapiente in. Nemo consequatur necessitatibus totam corrupti, delectus laboriosam quod aliquid tempora maxime repellat. Exercitationem nobis nemo quam, totam odit omnis aspernatur? Ex beatae at dicta. Magni repellendus nostrum corporis qui, ducimus eius cupiditate ut officia incidunt earum ratione maiores sint animi? Odio sint porro obcaecati? Officia voluptates dicta commodi odit corporis adipisci nam architecto repellat eius, similique, velit deleniti cum est esse ipsam iste omnis magni quaerat et. Aperiam pariatur iure eos mollitia vitae voluptate, unde fuga quo dolore tenetur, facilis beatae quos. Nisi adipisci perferendis dicta ducimus saepe pariatur corrupti unde, maxime veritatis labore velit. Ipsa a voluptatem quis commodi doloremque, aut eum dolores assumenda voluptatibus in similique cumque harum? Accusamus ab qui temporibus quas aliquid maiores explicabo eveniet. Sapiente minima rerum eius excepturi sunt ad doloremque saepe voluptates fugit amet suscipit, beatae dolorum delectus voluptate? Voluptatibus reiciendis corrupti nihil similique obcaecati harum quam. Vel corrupti magni similique. Eum, labore? Necessitatibus vitae omnis eligendi cumque maiores officia culpa voluptatibus sed quos sapiente odit corporis, laborum nostrum officiis rerum dolor in? Obcaecati, dolorem repellat qui doloribus impedit nostrum eos adipisci, illum repellendus officia mollitia quasi voluptates? Nemo omnis dolor maxime consectetur dolores quas! In atque sapiente maxime saepe est nesciunt repudiandae. Perferendis fugit a corrupti aspernatur illo tempora, expedita possimus itaque eveniet! Voluptatem, possimus culpa itaque provident quasi libero alias labore quisquam eius. Voluptatum deserunt illo sequi accusantium dolore, non nam vel in expedita necessitatibus error maxime earum exercitationem iusto natus iure culpa numquam delectus magni voluptates porro. Soluta aliquam, doloremque, impedit dolorem eos saepe laboriosam aspernatur consequatur eius magnam atque ipsam, tempore est veniam modi sequi deserunt temporibus veritatis officia enim numquam excepturi culpa blanditiis aperiam. Vel nostrum qui at laudantium, perferendis voluptatum praesentium nemo iusto ex ullam quos fuga, reprehenderit eveniet culpa sed alias sunt facilis laborum odio, tenetur modi iure molestias. Itaque tempore, pariatur earum, architecto ab deleniti expedita omnis saepe totam ipsam iste facere possimus similique laboriosam velit eaque exercitationem necessitatibus id vitae ut quae impedit?
    </header>
    <div>
        <p></p>
    </div>

    <footer>

        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus, magni repellendus! Harum maxime nisi quod neque veritatis eos voluptatem iure, incidunt commodi dolore qui quisquam id, dolorum error magnam, laboriosam officiis quo voluptate exercitationem illo quaerat ipsam dignissimos! Id quis alias excepturi autem sed error, quas voluptate, totam aperiam dolorum rerum incidunt, iure nostrum nihil odit rem provident eligendi quae assumenda labore debitis odio architecto? Amet est, ea minus dolore, quo officiis numquam earum quae nesciunt facere possimus iure ab veritatis? Earum, ut quasi. Sed quasi, doloribus obcaecati officiis at distinctio molestiae corrupti vel, totam culpa praesentium non nam, delectus repellat? Ea molestias incidunt doloribus, error deleniti minus doloremque, impedit quos rem officiis perspiciatis! Cupiditate excepturi ducimus rerum voluptatibus alias ab officiis, earum eum ipsum adipisci numquam perferendis deleniti. Dolorum, quisquam nulla. Vel consequuntur totam illum magnam debitis? Harum asperiores sequi voluptatem unde ipsum ducimus facilis ex, quae, a rerum odit, vero eius voluptas tenetur ad vel odio repellendus ipsa est ratione earum maiores? Amet consequuntur facilis mollitia aperiam accusamus ipsa? Omnis temporibus aut consectetur in harum officia inventore optio voluptatem vero, incidunt eaque, rem obcaecati, aliquid pariatur. Consequatur rerum minima placeat quos velit est expedita magnam veniam accusamus in quidem molestias harum blanditiis similique eligendi modi recusandae asperiores, laudantium a odio? Soluta dolorum aliquam ex incidunt tempora consectetur iure numquam rem earum quibusdam esse animi debitis possimus magnam eveniet quam, officia voluptas ab natus nisi doloremque? Fugit cum saepe repellendus sequi et quia dignissimos perspiciatis natus, veniam ad consequatur iusto enim? Eius, voluptates? Magni nulla veritatis voluptatem ad recusandae ratione id reprehenderit est? Illum officiis assumenda aperiam quidem amet minima? Accusamus nulla placeat suscipit corporis deleniti adipisci dignissimos, ducimus officia, maxime, praesentium itaque nesciunt eos porro! Odio alias illum rerum impedit quidem est numquam dolorum! Numquam, sit. Eos, repudiandae. Obcaecati velit enim excepturi illum commodi quibusdam culpa quis quod, officiis amet ducimus pariatur quaerat aliquid perferendis nobis. Nisi est velit at amet non, voluptatem, maiores quidem explicabo minima tempore minus eveniet quasi rem et iste aperiam cupiditate tempora quaerat iusto debitis! Earum doloribus quam dicta voluptates quas dignissimos quis, nesciunt eum possimus nisi consequuntur error doloremque temporibus a natus minus nulla dolor? Laboriosam error a saepe maxime maiores repudiandae molestiae, ex molestias modi quasi velit hic quae sit officiis architecto illum assumenda veniam tempora voluptate adipisci! Debitis praesentium atque nisi hic, deserunt cum recusandae officia accusamus, ipsam saepe id ducimus voluptate dolores sunt eius tenetur dicta sed officiis incidunt! Voluptates aliquam incidunt optio minus aperiam accusantium reiciendis accusamus? Nisi nobis libero perspiciatis illum natus vero, accusantium ipsum? Nam, minima. Debitis dolor voluptatum possimus. Pariatur reprehenderit enim labore quam aliquam distinctio, et eaque maxime ad, laborum ea inventore eos dolorem asperiores saepe sapiente obcaecati amet ipsam quidem facere quae eveniet ut qui? Numquam, voluptatem illo. Perspiciatis nostrum dignissimos ea et neque quaerat totam. Deserunt, laborum architecto cupiditate iste minima enim modi tenetur illum sit eligendi, odio veniam totam hic praesentium. Possimus delectus ducimus iste similique repellendus repudiandae vitae officia, aliquid provident asperiores alias rem, voluptatibus veritatis ipsa a? Error quasi harum aliquam voluptates quis doloribus placeat vel eligendi libero, perferendis non quas animi ipsa adipisci est. Ad, incidunt sunt inventore quas necessitatibus quaerat quis ipsam voluptatibus, ex possimus at ab numquam excepturi tempore dolorem odit! Recusandae earum ut ab culpa necessitatibus! Sit modi libero aut eius impedit doloribus, deleniti officia ab! Assumenda, harum rerum. Dolorum facilis ea ipsam, eum quo praesentium hic aliquid sunt veritatis distinctio quidem voluptatibus quisquam. Accusamus non placeat, ipsa aliquid minima magnam cum eaque ut molestiae blanditiis aut voluptatibus assumenda eveniet veniam aspernatur, quisquam consectetur accusantium, nemo similique cupiditate! Modi, voluptate. Nemo, ab fugit? Distinctio vel odit, pariatur tenetur dolores, maiores sed, mollitia nostrum illum vitae magni ratione sequi. Doloremque officiis a dolor recusandae quisquam nesciunt, architecto laborum labore nostrum velit eveniet similique, quas vel sit sequi corporis aspernatur illo? Debitis assumenda qui quia soluta sequi doloremque maiores. Ipsam ullam blanditiis dolore ratione asperiores dicta dignissimos ea veritatis, itaque in minus magnam praesentium quisquam necessitatibus quae suscipit repudiandae. Eaque quaerat aut temporibus magnam tempora et at deserunt qui expedita, blanditiis reiciendis voluptatum aliquid nihil aliquam unde a ipsam consectetur similique sit! Ipsum repudiandae saepe nobis dolore sunt illo libero voluptatem dolores nemo accusantium doloribus explicabo, laboriosam labore praesentium, autem omnis quod ad. Omnis asperiores aliquam dolore debitis nam, dolorem temporibus voluptatibus odit sapiente tempora! Incidunt at odit, molestias voluptatem repudiandae provident officiis illo cum id, quibusdam quis maxime sunt eum voluptas praesentium accusantium ratione tenetur quos? Consequatur rerum explicabo neque doloremque, ipsam alias exercitationem debitis consequuntur dignissimos et voluptatibus mollitia suscipit! Commodi eveniet officiis esse quibusdam iure explicabo temporibus, accusamus neque soluta assumenda veniam aut expedita nesciunt vero hic possimus praesentium non labore nobis unde libero. Ut dolores quibusdam sapiente obcaecati soluta. Obcaecati corporis sit fugit delectus, blanditiis, aspernatur sapiente, ab minima et quae maxime ea ducimus. Fugiat, hic explicabo! Rem, harum numquam alias eveniet modi ratione asperiores fugit nam sint accusamus cumque sapiente expedita ad iste voluptate nisi optio accusantium veniam, ex autem cum tempore nihil? Sunt provident assumenda dignissimos porro eaque asperiores, incidunt officiis voluptates suscipit recusandae beatae aspernatur earum cumque nemo cum temporibus tempore nobis sequi. Provident doloribus, aliquam, id hic tempora aspernatur cupiditate nemo in eum deleniti possimus repudiandae ipsam atque, sunt sint ipsum exercitationem! Sit, enim facilis quisquam modi ducimus dolorem sapiente delectus porro nostrum sed dolor dicta molestiae laudantium consectetur, officia possimus? Enim repellendus deserunt voluptas culpa libero odio perferendis! Nulla magnam recusandae eum. Ut eligendi vitae placeat eaque facilis, expedita dolorem laudantium, asperiores deleniti deserunt, animi dignissimos alias? Corrupti quod repudiandae dicta! Tenetur magni in, fuga quod veniam quia quis quas, nam quaerat quisquam, labore cumque illo minus animi obcaecati ipsum repellendus doloribus. Iure nemo error eos labore, odio, quis earum, dolorem excepturi ullam consequuntur id sunt doloremque autem aperiam impedit possimus ipsam. Culpa ut eum eligendi veritatis quos. In veniam obcaecati itaque blanditiis laudantium tempore quidem! Vitae totam quibusdam iste provident aperiam cum reiciendis quod magni debitis. Tempora.
    </footer>

    <script>
        var p = document.querySelector("p");
        var div = document.querySelector("div");

        div.onmousemove = function(e){
            // console.log(e.pageX, e.pageY);
            // console.log(e.clientX, e.clientY);
            // console.log(e.screenX, e.screenX);
            console.log(e.movementX, e.movementY);
        }
    </script>
</body>
</html>
